<template>
    <HeaderBar :title="$t('mine.wallet.passwordTitle')" />
    <view class="password-container main-container">
        <view class="form-container">
            <view class="item">
                <view class="icon">
                    <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
                </view>
                <view class="name">{{$t('login.oldPwd')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.oldPwd"
                        :placeholder="$t('login.verifyOldPwd')"
                        placeholderStyle="font-size:28rpx"
                        show-password
                        no-border
                        clearable
                    />
                </view>
            </view>
            <view class="item">
                <view class="icon">
                    <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
                </view>
                <view class="name">{{$t('login.newPwd')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.newPwd"
                        :placeholder="$t('login.verifyNewPwd')"
                        placeholderStyle="font-size:28rpx"
                        show-password
                        no-border
                        clearable
                    />
                </view>
            </view>
            <view class="item">
                <view class="icon">
                    <wd-icon name="lock-on" size="40rpx" color="#969799"></wd-icon>
                </view>
                <view class="name">{{$t('login.confirmNewPwd')}}</view>
                <view class="input">
                    <wd-input
                        v-model="state.confirmPwd"
                        :placeholder="$t('login.verifyConfirmNewPwd')"
                        placeholderStyle="font-size:28rpx"
                        show-password
                        no-border
                        clearable
                    />
                </view>
            </view>
        </view>
        <view class="form-btns" @click="onSubmit">{{$t('login.confirm')}}</view>
        <view class="tips">
            {{$t('login.forgotPwd')}}
            <view class="service" @click="openService">{{$t('login.service')}}</view>
        </view>
    </view>

    <uni-popup ref="serviceRef">
        <Service @onClose="onClose" />
    </uni-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import Service from '@/components/Service/index';
import HeaderBar from '@/components/HeaderBar';
import { NavigateTo, showToast, getStorage } from '@/utils/common';
import { updateCashPassword } from '@/api/login';
const serviceRef = ref(null) as any;

const state = reactive({
    oldPwd: '',
    newPwd: '',
    confirmPwd: ''
});

//开客服弹窗
const openService = () => {
    serviceRef.value.open('center');
};




//关闭服弹窗
const onClose = () => {
    serviceRef.value.close();
};

//提交
const onSubmit = async () => {
    if (!state.oldPwd) {
        showToast({ title: toLang('login.verifyOldPwd')});
        return;
    }
    if (!state.newPwd) {
        showToast({ title: toLang('login.verifyNewPwd')});
        return;
    }
    if (!state.confirmPwd || state.confirmPwd !== state.newPwd) {
        showToast({ title: toLang('login.verifyRepeatPwd') });
        return;
    }
    const params={...state,phoneNo:getStorage('user').phoneNo}
    const res = await updateCashPassword(params);
    if(res.code !== 200){
        return;
    }
    showToast({title:toLang('common.success')});
    NavigateTo('/pages/mine/wallet/index');
};
</script>

<style lang="scss" scoped>
.password-container {
    padding: 0 30rpx;
    .form-container {
        .item {
            display: flex;
            align-items: center;
            padding: 40rpx 0;
            border-bottom: 1rpx solid #ebedf0;
            .icon {
                width: 44rpx;
            }
            .name {
                width: 160rpx;
                font-size: 28rpx;
                overflow-wrap: break-word;
                line-height: 50rpx;
            }
            .input {
                flex: 1;
            }
        }
    }
    .form-btns {
        margin: 60rpx 0 40rpx;
        background: linear-gradient(135deg, #1989fa, #39b9f9);
        box-shadow: 0 1.06667vw 3.2vw #1989fa33;
    }
    .tips {
        display: flex;
        justify-content: center;
        font-size: 24rpx;
        color: #969799;
        .service {
            color: #1989fa;
            font-size: 26rpx;
            cursor: pointer;
            margin-left: 10rpx;
        }
    }
}
</style>
